<template>
  <div class="login-panel">
    <nav-header class="header"></nav-header>
    <div class="login-left">
      <div class="explain">
        <img
          class="logo"
          src="@/assets/img/login/login-Investment-management.png"
          alt=""
        />
        <div class="title">
          <h3 class="h3">CREATE A NEW DIGITAL ECONOMY</h3>
          <span> Safe · Efficient · Smart Algorithms </span>
        </div>
      </div>
      <div class="bg">
        <img src="~@/assets/img/login/login@2x.png" alt="" />
      </div>
    </div>

    <div class="login-bgc">
      <img src="@/assets/img/login/login-transparen.png" alt="" />
    </div>
    <h1 class="login-title">Sign in</h1>
    <div class="login-main">
      <h4 class="title h2">Sign in to Investment Management</h4>
      <div class="login-container">
        <el-tabs class="el-tabs" :active-name="currentTab" v-model="currentTab">
          <el-tab-pane name="email">
            <template #label>Email</template>
            <login-account ref="accountRef" :is-keep="isKeep"></login-account>
          </el-tab-pane>
          <el-tab-pane label="mobile" name="mobile">
            <template #label>Mobile</template>
            <login-phone ref="phoneRef"></login-phone>
          </el-tab-pane>
        </el-tabs>

        <div class="account-control">
          <el-checkbox v-model="isKeep">Remember me</el-checkbox>
          <el-link href="javascript:;" type="primary">
            Forgot password?
          </el-link>
        </div>

        <el-button type="primary" class="login-btn" @click="handleLoginClick">
          Login
        </el-button>

        <div class="other-login-container">
          <!-- <div class="line-before"></div> -->
          <span>or log with</span>
          <!-- <div class="line-after"></div> -->

          <div class="other-login">
            <div class="other-login-item">
              <img src="@/assets/img/login/facebook@2x.png" alt="" />
            </div>
            <div class="other-login-item">
              <img src="@/assets/img/login/google@2x.png" alt="" />
            </div>
            <div class="other-login-item">
              <img src="@/assets/img/login/twitter@2x.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <im-footer class="footer"></im-footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { NavHeader } from '@/components/nav-header'
import ImFooter from '@/components/im-footer'
import LoginAccount from './login-account.vue'
import LoginPhone from './login-phone.vue'

const currentTab = ref('email')
const isKeep = ref(true)
const accountRef = ref<InstanceType<typeof LoginAccount>>()
const phoneRef = ref<InstanceType<typeof LoginPhone>>()

// 触发登陆事件
const handleLoginClick = () => {
  // 判断当前选项
  if (currentTab.value === 'email') {
    // 邮箱登录
    accountRef.value?.loginAction()
  } else {
    // 手机登陆
    phoneRef.value?.loginAction()
  }
}

//
// document
//   .querySelector('body')
//   ?.setAttribute('style', 'background-color:#1c1c24')
</script>

<style scoped lang="less">
.login-panel {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  .header {
    display: none;
  }
  .login-bgc {
    display: none;
  }
  .footer {
    display: none;
  }

  .login-title {
    display: none;
  }
  .login-left {
    width: 622px;
    border-radius: 20px 0px 0px 20px;
    background-color: #1c1c24;
    .explain {
      padding-bottom: 50px;
      .logo {
        margin: 26px 0 0 39px;
        width: 132px;
        height: 55px;
      }
      .title {
        text-align: center;
        h3 {
          font-family: SF Pro Display;
          font-weight: 600;
          color: #fff;
          margin-top: 75px;
        }
        span {
          color: #ffffff;
          opacity: 0.58;
        }
      }
    }
    .bg {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .login-container {
    padding: 0 82px;
  }
  .login-main {
    width: 934px;
    text-align: center;
    box-sizing: border-box;
    background-color: #fff;
    padding: 100px 100px 100px;
    .title {
      font-weight: bold;
      margin-bottom: 65px;
    }

    .account-control {
      display: flex;
      justify-content: space-between;

      :deep(.el-checkbox) {
        color: #000;
      }
    }

    .login-btn {
      width: 100%;
      height: 60px;
      background: #3772ff;
      border-radius: 50px;
      margin-top: 40px;
      font-size: 20px;
      font-family: SF Pro Display;
      font-weight: 500;
      margin-bottom: 27px;
    }

    .other-login-container {
      span {
        position: relative;
        margin: 0 19px;
        color: #cacaca;
      }

      span::after,
      span::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 151px;
        height: 1px;
        background-color: #707070;
        opacity: 0.1;
      }
      span::before {
        left: -165px;
      }
      span::after {
        left: 98px;
      }
      .other-login {
        display: flex;
        justify-content: center;
        margin-top: 19px;
        .other-login-item {
          width: 89px;
          height: 42px;
          line-height: 42px;
          margin-right: 10px;
          border: 1px solid #efefef;
          text-align: center;
          border-radius: 8px;
          background-color: #fff;
          img {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
    :deep(.el-tabs__nav-scroll) {
      transform: none !important;
    }

    :deep(.el-tabs__item) {
      padding: 0 20px;
    }
    :deep(.el-tabs__item.is-active) {
      background-color: #1c1c24;
      border-radius: 50px;
      color: #fff;
    }
    :deep(.el-tabs__nav-wrap::after) {
      height: 0px;
    }

    :deep(.el-tabs__active-bar) {
      height: 0;
    }
    :deep(.el-tabs__nav) {
      margin: 0 auto;
      float: none;
    }
    :deep(.el-tabs__nav-prev) {
      display: none;
    }
    :deep(.el-tabs__nav-next) {
      display: none;
    }
    :deep(.el-tabs__nav-wrap.is-scrollable) {
      padding: 0;
    }
  }
}
:deep(body) {
  background-color: #1c1c24 !important;
}
@media screen and (max-width: 1400px) {
  .login-panel {
    .line-before,
    .line-after {
      display: none;
    }
  }
}
@media screen and (max-width: 750px) {
  .login-panel {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 1;
    background-color: #1c1c24;
    .header {
      display: block;
      position: absolute;
    }
    .login-title {
      display: block;
      margin: 0;
      position: absolute;
      color: #fff;
      font-weight: 600;
      top: 23%;
      font-size: 40px;
    }
    .login-bgc {
      position: absolute;
      top: 74px;
      // width: 100%;
      text-align: center;
      color: #fff;
      overflow: hidden;
      h1 {
        position: relative;
        left: 0;
        top: -300px;
        font-size: 40px;
        font-family: SF Pro Display;
        font-weight: 600;
      }
      display: block;
    }
    .footer {
      display: block;
    }
    .login-left {
      width: 100%;
      display: none;
    }

    .login-main {
      margin-top: 340px;
      margin-bottom: 57px;
      order: 0;
      width: 382px;
      padding: 23px 0;
      border-radius: 15px;
      z-index: 3;

      .login-container {
        padding: 0 16px;

        .login-btn {
          height: 44px;
          margin: 32px 0 19px;
        }

        .other-login {
          .other-login-item {
            width: 64px;
            height: 31px;
            line-height: 32px;
          }
        }
      }
      .line-before,
      .line-after {
        display: none;
      }

      .title {
        content: 'Sign in';
        display: none;
      }
    }
    .login-left {
      order: 1;
      .explain {
        .logo {
          margin-right: 50px;
          width: 132px;
          height: 55px;
        }
        .title {
          text-align: center;

          h3 {
            font-size: 14px;
            font-family: SF Pro Display;
            font-weight: 600;
            color: #fff;
            margin-top: 75px;
          }
        }
      }
    }
  }
}
</style>
